<!--
  描述：拖放地图组件，默认尺寸是 500 * 300
  接收属性参数：
    lat: 纬度
    lng: 经度
  自定义事件：
    drag: 拖放完成事件
  示例：
    <mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>
-->
<template>
  <div class="mainMap" ref="mainMap" :style="{height:tableHeight+'px'}">
    <el-dialog
      title="设备信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div v-for="item in equDetail">
        <p style="margin: 1px 0">{{item.dataName}}: <span>{{item.num}}</span></p>
      </div>
      <span slot="footer" class="dialog-footer">
    <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
    <el-button type="primary" @click="equDetailBtn()">详细信息</el-button>
  </span>
    </el-dialog>
    <!--<fullscreen ref="fullscreen" @change="fullscreenChange" background="white" class="full">-->
    <div class="title">

      <!--<button style="float: right" type="button" @click="toggle">Fullscreen</button>-->
      <p class="left">当前温度:{{this.weatherStatus.tmp}}°C  {{this.weatherStatus.cond_txt}}</p>
      <h1 class="middle">服务中心运行监控</h1>
      <div class="right">

        <p>{{this.realTime}}</p>
        <i @click="buttoncli"></i>
      </div>

    </div>
    <div class="con" ref="abc">
      <div class="left">
        <div class="text">
          <div>
            <h4>安装设备总数</h4>
            <p>{{equipmentTotal}}</p>
          </div>
          <div>
            <h4>维修人员总数</h4>
            <p>{{operationUserTotal}}</p>
          </div>
          <div>
            <h4>报修工单总数</h4>
            <p>{{workOrderTotal}}</p>
          </div>
        </div>

        <div class="echart" ref='echarts' id="myChart"></div>
        <div class="echart4" id="myChart4"></div>
        <div class="echart2" id="myChart2"></div>

      </div>
<div class="m-map">
  <!--<div class="search" v-if="placeSearch">-->
  <!--<input type="text" placeholder="请输入关键字" v-model="searchKey">-->
  <!--<button type="button" @click="handleSearch">搜索</button>-->
  <!--<div id="js-result" v-show="searchKey" class="result"></div>-->
  <!--</div>-->
  <transition name="fade">
    <div class="rightMenu" v-show="showMenu===0">
      <div style="width: 350px;height: 200px" class="echart3" id="myChart3"></div>
    </div>
  </transition>
  <i class="gn_asidebtn" :class="showMenu===0 ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
     @click="showRightMenu"></i>
  <!--<div class="button">-->
    <!--<el-button type="primary" plain id="memBtn" @click="btnShowMem">人员</el-button>-->
    <!--<el-button type="primary" plain id="equBtn" @click="btnShowEqu">设备</el-button>-->
  <!--</div>-->
  <div class="swi" id="swi">
    <swiper class="swiper-container" :options="swiperOption" ref="mySwiper" v-if='areaTotal.length'>
      <!-- slides -->
      <swiper-slide class="item" v-for="(item,index) in areaTotal" :key="index">
        <p>{{item.xzqhmc}}</p>
        <h4>{{item.equipmentTotal}}</h4>
      </swiper-slide>

      <!-- Optional controls -->
      <!--<div class="swiper-pagination"></div>-->
      <!-- Add Arrows -->

    </swiper>

  </div>
  <div class="m-map" id="container" ref="maps">

    <div id="js-container" class="map">正在加载数据 ...</div>

  </div>
</div>


    </div>
    <!--</fullscreen>-->

  </div>
</template>

<script>
  import remoteLoad from '../utils/remoteLoad.js'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import {
    getMapMemInfo,
    getCompletionTime,
    getTaskType,
    getArea,
    getOperationMonitoring,
    getWorkOrderRoute,
    getDevStatus,
    getWeather,
    getEquipmentCoordinate,
    getOperationUserCoordinate,
    getDevData
  } from '@/api'
  import screenfull from 'screenfull'
  export default {
    props: ['lat', 'lng'],
    data() {
      return {
        equDetail:[],
        dialogVisible: false,
        realTime:0,
        weatherStatus:{},
        ipWeather:0,
        timeA: 0,
        timeB: 22,
        timeC: 0,
        timeD: 0,
        timeE: 0,
        xzqhdm: 0,
        devStatus: {},
        areaTotal: [],
        installNum: [],
        installName: [],
        userMapList: [],
        equMapList: [],
        centerPoint: [],
        workRoute: null,
        equipmentTotal: 0,
        operationUserTotal: 0,
        workOrderTotal: 0,
        userLeisureTotal: 0,
        work: 0,
        userBusyTotal: 0,
        tableHeight: 500,
        showMenu: 0,
        searchKey: '',
        placeSearch: null,
        dragStatus: false,
        AMapUI: null,
        AMap: null,
        markers: [],
        markerPot: null,
        markers2: [],
        map: null,
        mem: 0,
        equ: 0,
        screenHeight: document.documentElement.clientHeight,
        fullscreen: false,
        myChart: null,
        swiperOption: {
          slidesPerView: 6,
          spaceBetween: 0,
          freeMode: true,
          autoplay: {
            delay: 2000,//1秒切换一次
            // disableOnInteraction: false,
          },
          loop: true,
          // observer:true,//修改swiper自己或子元素时，自动初始化swiper
          // observeParents:true,//修改swiper的父元素时，自动初始化swiper
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        }
      }
    },
    async created() {
      // 已载入高德地图API，则直接初始化地图
      let xzqhdm = JSON.parse(sessionStorage.getItem('userInfo')).xzqhdm;
      this.xzqhdm = xzqhdm
      this.getAreaTotal()
      this.getMemberTotal()
      this.getTimeTotal()
      this.getTaskTypeStatistics()
      this.getDevStatusTotal()
      this.getOperationMonitor ()
      this.getWeathers()
      // 获取地图高度
      this.heiMap()
      if (window.AMap && window.AMapUI) {
        // this.getOperationMonitor ()
        // 未载入高德地图API，则先载入API再初始化
      } else {
        await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=1f5562ae05bbb79635f431943e667627&plugin=AMap.Driving`)
        await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
        await remoteLoad('https://a.amap.com/jsapi_demos/static/citys.js')
        await remoteLoad('http://pv.sohu.com/cityjson?ie=utf-8')
        this.ipWeather=returnCitySN['cip'];
        this.getOperationMonitor ()
        await this.getWeathers()
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    watch: {
      screenHeight(val) {
        this.screenHeight = val
        this.tableHeight = this.screenHeight - 40
      }
    },
    mounted() {
      // this.selfAdaption ()
      const that = this
      window.onresize = () => {
        return (() => {
          window.screenHeight = document.documentElement.clientHeight
          this.screenHeight = window.screenHeight;
        })()
      }
      this.getWorkOrder()
      this.getWeathers()
      this.echart()
      this.getOperationMonitor()
      setInterval(() => {
        // this.initMap()
        this.initMapNew()
      }, 300000)
      setInterval(() => {
        this.getTimeTotalNoInit()
        this.getMemberTotalNoInit()
        this.getDevStatusTotalNoInit()
      }, 60000)
      // 页面加载完后显示当前时间
      this.realTime = this.dealWithTime(new Date())
      // 定时刷新时间
      let _this = this
      // 定时器
      this.timer = setInterval(()=> {
        _this.realTime = this.dealWithTime(new Date()) // 修改数据date
      }, 1000)
    },
    methods: {
      equDetailBtn(){
        this.dialogVisible=false
        this.$message.error('详细信息暂时不能查看');
      },
      //IP
      getWeathers() {
        let ipdata={ip:returnCitySN['cip']}
        getWeather(ipdata).then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data.HeWeather6[0];
            this.weatherStatus=data.now
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      //时间
      dealWithTime(data) {
        let formatDateTime
        let Y = data.getFullYear()
        let M = data.getMonth() + 1
        let D = data.getDate()
        let H = data.getHours()
        let Min = data.getMinutes()
        let S = data.getSeconds()
        let W = data.getDay()
        if (H < 10) {
          H = '0' + H
        }
        if (Min < 10) {
          Min = '0' + Min
        }
        if (S < 10) {
          S = '0' + S
        }
        if (W === 1) {
          W = '一'
        } else if (W === 2) {
          W = '二'
        } else if (W === 3) {
          W = '三'
        } else if (W === 4) {
          W = '四'
        } else if (W === 5) {
          W = '五'
        } else if (W === 6) {
          W = '六'
        } else if (W === 0) {
          W = '日'
        }
        formatDateTime = Y + '-' + M + '-' + D +'  周' + W+'  '+ H + ':' + Min
        return formatDateTime
      },
      //获取总数
      getMemberTotal() {
        getMapMemInfo().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data;
            this.equipmentTotal = data.equipmentTotal
            this.operationUserTotal = data.operationUserTotal
            this.workOrderTotal = data.workOrderTotal
            this.userBusyTotal = data.operationUserBusyTotal
            this.userLeisureTotal = data.operationUserLeisureTotal
            this.echart2()
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      getMemberTotalNoInit() {
        getMapMemInfo().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data;
            this.equipmentTotal = data.equipmentTotal
            this.operationUserTotal = data.operationUserTotal
            this.workOrderTotal = data.workOrderTotal
            this.userBusyTotal = data.operationUserBusyTotal
            this.userLeisureTotal = data.operationUserLeisureTotal
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      //获取维修时间
      getTimeTotal() {
        getCompletionTime().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data;
            this.timeA = data.maintenanceCompletionTimeTotalTypeA
            this.timeB = data.maintenanceCompletionTimeTotalTypeB
            this.timeC = data.maintenanceCompletionTimeTotalTypeC
            this.timeD = data.maintenanceCompletionTimeTotalTypeD
            this.timeE = data.maintenanceCompletionTimeTotalTypeE
            this.echart4()

          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      getTimeTotalNoInit() {
        getCompletionTime().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data;
            this.timeA = data.maintenanceCompletionTimeTotalTypeA
            this.timeB = data.maintenanceCompletionTimeTotalTypeB
            this.timeC = data.maintenanceCompletionTimeTotalTypeC
            this.timeD = data.maintenanceCompletionTimeTotalTypeD
            this.timeE = data.maintenanceCompletionTimeTotalTypeE
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      // 获取设备状态
      getDevStatusTotal() {
        let keyData = sessionStorage.getItem('equiLoginValue');
        let xzqhdm = JSON.parse(sessionStorage.getItem('userInfo')).xzqhdm;
        let devParams = {
          param: `{"key":${keyData},"reqData":{"xzqhdm":${xzqhdm}}}`
          // param: `{"key":${keyData},"reqData":{"xzqhdm":110113121000}`
        }
        getDevStatus(devParams).then(res => {
          let code = res.data.retCode;
          if (code == 0) {
            let data = res.data.page[0];
            this.devStatus = data
            this.echart()
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      getDevStatusTotalNoInit() {
        let keyData = sessionStorage.getItem('equiLoginValue');
        let xzqhdm = JSON.parse(sessionStorage.getItem('userInfo')).xzqhdm;
        let devParams = {
          param: `{"key":${keyData},"reqData":{"xzqhdm":${xzqhdm}}}`
        }
        getDevStatus(devParams).then(res => {
          let code = res.data.retCode;
          if (code == 0) {
            let data = res.data.page[0];
            this.devStatus = data
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      //任务方式排名
      getTaskTypeStatistics() {
        getTaskType().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data;
            data.list.forEach(item => {
              this.installNum.push(item.handleTypeTotal)
              this.installName.push(item.handleTypeName)
            })
            this.echart3()
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      //获取底部轮播图数据
      getAreaTotal() {
        getArea().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data.list;
            this.areaTotal = data
            // this.$nextTick(() => {  // 下一个UI帧再初始化swiper
            //   this.initSwiper();
            // });
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      initSwiper() {
        if (this.swiper != null) return;
        this.swiper = new Swiper('.swiper-container', {
          slidesPerView: 7,
          spaceBetween: 0,
          autoplay: {
            delay: 500,//1秒切换一次
          },
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
      },
      // 获取地图数据
      getOperationMonitor() {//调入查询接口
        getOperationMonitoring().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data;
            // this.equMapList = data.list
            // this.userMapList = data.operationUserCoordinateDtoList
            this.centerPoint = [data.longitude, data.latitude]
            // this.initMap()
            this.initMapNew()
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      getWorkOrder() {//调入查询接口
        getWorkOrderRoute().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data;
            this.workRoute = data
            return Promise.resolve(res.data.data)
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      },
      heiMap() {
        window.screenHeight = document.documentElement.clientHeight
        this.screenHeight = window.screenHeight;
        this.tableHeight = this.screenHeight - 40
      },
      buttoncli() {
        if (!screenfull.enabled) { // 如果不允许进入全屏，发出不允许提示
          this.$message({
            message: '不支持全屏',
            type: 'warning'
          })
          return false
        }
        const target = this.$refs.mainMap
        screenfull.request(target);
        // screenfull.toggle()
        // this.$message({
        //   message: '全屏啦',
        //   type: 'success'
        // })
        this.echart()
        this.echart2()
        this.echart4()
      },
      echart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '设备运行状况',
            // subtext: '纯属虚构',
            x: 'center'
          },
          color: ['#556FB5', '#F8B551', '#32B16C', '#EB6877'],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            x: 'left',
            orient: 'vertical',
            itemWidth: 10,  // 设置宽度
            itemHeight: 10, // 设置高度
            data: ['开机-正常', '开机-故障', '关机-正常', '关机-故障']
          },
          series: [
            {
              name: '运行状况',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              label: {
                show: true,
                formatter: '{d}%',
                position: 'inner',
              },
              data: [
                {value: this.devStatus.on_normal, name: '开机-正常'},
                {value: this.devStatus.on_error, name: '开机-故障'},
                {value: this.devStatus.off_normal, name: '关机-正常'},
                {value: this.devStatus.off_error, name: '关机-故障'},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
      echart2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart2 = this.$echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart2.setOption({
          title: {
            text: '人员工作状态',
            // subtext: '纯属虚构',
            x: 'center'
          },
          color: ['#32B16C', '#556FB5'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            x: 'left',
            orient: 'vertical',
            itemWidth: 10,  // 设置宽度
            itemHeight: 10, // 设置高度
            data: ['闲置', '工作中']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
          },
          yAxis: {
            type: 'category',
            data: ['统计'],
            show: false,
          },
          series: [
            {
              name: '工作中',
              type: 'bar',
              stack: '总量',
              position: 'insideBottom',
              label: {
                normal: {
                  show: true,
                  position: 'insideLeft',
                  // formatter: '{name|{a}}{c}  ',
                  rich: {
                    name: {
                      color: '#fff',
                    }
                  },
                }
              },
              barWidth: 15,
              data: [this.userBusyTotal]
              // data: [1000]
            },
            {
              name: '闲置',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  align: 'left',
                  show: true,
                  position: 'insideLeft',
                  // formatter: '{name|{a}}{c}  ',
                  rich: {
                    name: {
                      color: '#fff',
                      // textBorderColor: '#fff'
                    }
                  },
                }
              },
              barWidth: 25,
              data: [this.userLeisureTotal ]
              // data: [10]
            },
          ]
        })
        window.addEventListener("resize", () => {
          myChart2.resize();
        });
      },
      echart3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart3'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '任务处理方式排名',
            top:'10%',
          },
          color: ['#556FB5'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          // legend: {
          //   data: ['设备型号1','设备型号2','设备型号3','设备型号4','设备型号5']
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            name: 'Days',
            axisLabel: {
              formatter: '{value}'
            },
            show: false,
          },
          yAxis: {
            type: 'category',
            data: this.installName,
            // show: false,
            nameLocation: ['end'],
            // axisLabel: {//坐标轴刻度标签的相关设置。
            //   inside: true,
            // },
            z: 10,
            axisLine: {show: false},
            axisTick: {show: false},
            // splitLine:{show:false},
          },
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            {
              name: '数量',
              type: 'bar',
              barWidth: 10,
              label: {
                position: [10, 10],
                normal: {
                  show: true,
                  position: 'right'
                }
              },
              data: this.installNum
            },
          ]
        }, window.onresize = myChart.resize)
      },
      echart4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart4 = this.$echarts.init(document.getElementById('myChart4'))
        // 绘制图表
        var option = {
          title: {
            text: '维修时间统计',
            x: 'center'
          },
          color: ['#556FB5', '#32B16C', '#F8B551', '#EB6877', '#448ACA'],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            x: 'left',
            orient: 'vertical',
            itemWidth: 10,  // 设置宽度
            itemHeight: 10, // 设置高度
            data: ['1小时以内', '1-2小时', '2-3小时', '3-4小时', '4小时以上']
          },
          series: [
            {
              name: '维修时间',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'inner',
                  formatter: '{d}%',
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {value: this.timeA, name: '1小时以内', label: {show: true}, labelLine: {show: true}},
                {value: this.timeB, name: '1-2小时', label: {show: true}, labelLine: {show: true}},
                {value: this.timeC, name: '2-3小时', label: {show: true}, labelLine: {show: true}},
                {value: this.timeD, name: '3-4小时', label: {show: true}, labelLine: {show: true}},
                {value: this.timeE, name: '4小时以上', label: {show: true}, labelLine: {show: true}}
              ]
            }
          ]
        }
        var opt = option.series[0];
        //数据为零时隐藏线段
        function lineHide(opt) {
          //循环获取数据进行处理
          opt.data.forEach((item) => {
            //value等于0改变label与labelLine属性
            if (item.value === 0) {
              item.labelLine.show = false;
              item.label.show = false;
            }
          });
        }
        lineHide(opt);
        myChart4.setOption(option)
        window.addEventListener("resize", () => {
          myChart4.resize();
        });
      },
      toggle() {
        this.$refs['fullscreen'].toggle() // recommended
        // this.fullscreen = !this.fullscreen // deprecated
        // this.selfAdaption()
        this.echart()
        this.echart2()
        // this.echart3()
        this.echart4()
      },
      fullscreenChange(fullscreen) {
        this.fullscreen = fullscreen
        this.echart()
        this.echart2()
        // this.echart3()
        this.echart4()
      },
      // echars自适应
      echarsAuto() {
        // myChart1=this.$echarts.init(document.getElementById('myChart'))
        myChart1 = this.refs.echarts
        myChart2 = this.$echarts.init(document.getElementById('myChart2'))
        myChart3 = this.$echarts.init(document.getElementById('myChart3'))
        myChart4 = this.$echarts.init(document.getElementById('myChart4'))
        var chartsArr = [];

        myChart1.setOption(option);

        chartsArr.push(myChart1);

        myChart2.setOption(option);

        chartsArr.push(myChart2);

        myChart3.setOption(option);

        chartsArr.push(myChart2);

        window.onresize = function () {
          for (var i = 0; i < chartsArr.length; i++) {
            chartsArr[i].resize();
          }
        }
      },
      showRightMenu() {
        console.log(1);
        this.showMenu === 0 ? this.showMenu = 1 : this.showMenu = 0
      },
      btnShowMem() {
        if (this.mem === 0) {
          this.markers.forEach(item => {
            item.hide();
          })
          this.mem = 1
        } else {
          this.markers.forEach(item => {
            item.show();
          })
          this.mem = 0
        }
      },
      btnShowEqu() {
        if (this.equ === 0) {
          this.markers2.forEach(item => {
            item.hide();
          })
          this.equ = 1
        } else {
          this.markers2.forEach(item => {
            item.show();
          })
          this.equ = 0
        }
      },
      // 实例化地图
      initMap() {

        var memBtn = document.getElementById('memBtn')
        // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        let AMapUI = this.AMapUI = window.AMapUI
        let AMap = this.AMap = window.AMap
        this.map = new AMap.Map("container", {
          mapStyle: 'amap://styles/fresh',
          resizeEnable: true,
          center: this.centerPoint,
          zoom: 15
        });
        console.log(this.equMapList,'equMapList');
        var style = [{
          url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(11, 11),
          zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
        }];
        var mass = new AMap.MassMarks(this.equMapList, {
          opacity: 0.8,
          zIndex: 111,
          cursor: 'pointer',
          style: style
        });

        var marker = new AMap.Marker({content: ' ', map: this.map});

        mass.on('mouseover', function (e) {

          marker.setPosition(e.data.lnglat);
          marker.setLabel({content: e.data.name})
        });

        mass.setMap(this.map);
        // 清除指定点
        // function clearMarker() {
        //   markers[0].setMap(null);
        //   markers[2].setMap(null);
        // }
        //
        //  var markers = [];
        //  var markers2 = [];
        var positions = [[116.405467, 39.907761], [116.415467, 39.907761], [116.415467, 39.917761], [116.425467,
          39.907761], [116.385467, 39.907761], [116.375467, 39.937761]];
        var positions2 = [[116.395467, 39.957761], [116.405467, 39.857761], [116.495467, 39.997761], [116.405467, 39.887761], [116.365467, 39.927761], [116.325467, 39.967761]];
        var drivingFn = (data) => {
          if(data){
            data.forEach(item=>{
              var driving = new AMap.Driving({
                map: this.map,
                hideMarkers: true,
                showTraffic: false
              });
              if (window.pathSimplifierIns) {
                //通过该方法清空上次传入的轨迹
                pathSimplifierIns.setData([]);
              }

              // if(this.workRoute.operationUser){
              //   driving.search(new AMap.LngLat(this.workRoute.operationUser.longitude, this.workRoute.operationUser.latitude), new AMap.LngLat(this.workRoute.equipment.longitude, this.workRoute.equipment.latitude), function (status, result) {
              //   });
              // }

              driving.search(new AMap.LngLat(item.operationUserLongitude, item.operationUserLatitude), new AMap.LngLat(item.equipmentLongitude, item.equipmentLatitude), function (status, result) {
              });
            })
            // driving.search(new AMap.LngLat(data.operationUser.longitude, data.operationUser.latitude), new AMap.LngLat(data.equipment.longitude, data.equipment.latitude), function (status, result) {
            // });
          }
          //   driving.search(new AMap.LngLat(116.325467, 39.907761), new AMap.LngLat(116.405467, 39.957761), function (status, result) {
          // });

        }
        getWorkOrderRoute().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data.list;
            drivingFn(data)
            this.workRoute = data
            // return Promise.resolve(res.data.data)
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });

        var getOperationMonitorInner = () => {//调入查询接口
          getOperationMonitoring().then(res => {
            let code = res.data.code;
            if (code == 0) {
              console.log(data.equipmentCoordinateDtoList,'data.equipmentCoordinateDtoListdata.equipmentCoordinateDtoList');
              let data = res.data.data;
              // this.equMapList = data.equipmentCoordinateDtoList
              this.equMapList = [
                {
                  hzxm: "赵林",
                  lnglat: [116.17489, 40.08114],
                  mph: "东一区170",
                  sb_id: "56522977799901386759",
                  xxdz: "北京市海淀区苏家坨镇苏三四",
                },
                {
                  hzxm: "赵士军",
                  lnglat: [116.174934, 40.081062],
                  mph: "东一区172",
                  sb_id: "56522977799901386768",
                  xxdz: "北京市海淀区苏家坨镇苏三四",
                }
              ]
              this.userMapList = data.operationUserCoordinateDtoList
              this.centerPoint = [data.longitude, data.latitude]
              for (var i = 0, marker; i < this.userMapList.length; i++) {
                this.markerPot = new AMap.Marker({
                  map: this.map,
                  // icon: require('../assets/image/mem1.png'),
                  icon: new AMap.Icon({
                    image: this.userMapList[i].workState === 0 ? require('../assets/image/mem1.png') : require('../assets/image/mem2.png'),
                    size: new AMap.Size(52, 52),
                    imageSize: new AMap.Size(36, 36)
                  }),
                  position: [this.userMapList[i].longitude, this.userMapList[i].latitude],

                });
                this.markerPot.setExtData(this.userMapList[i].userId)
                this.markerPot.on('click', (e) => {

                  getWorkOrderRoute(e.target.getExtData()).then(res => {
                    let code = res.data.code;
                    if (code == 0) {
                      let data = res.data.data;
                      drivingFn(data)
                      this.workRoute = data
                      // return Promise.resolve(res.data.data)
                    } else if (code == 1) {
                      this.$message({
                        message: res.data.msg
                      })
                    }
                  });



                  // this.getWorkOrder(e.target.getExtData()).then(res => {
                  //   console.log(res,'resresres');
                  //   if (res){
                  //     drivingFn()
                  //   }
                  // })


                  // clickMark()
                  // drivingFn2()
                })
                this.markers.push(this.markerPot);
              }

            } else if (code == 1) {
              this.$message({
                message: res.data.msg
              })
            }
          });
        }
        getOperationMonitorInner()
        // window.setInterval(() => {
        //   getOperationMonitorInner()
        // }, 1000)


        var marker2 = new AMap.Marker({
          content: ' ',
          map: this.map
        });
        // mass.setMap(this.map);
        // mass.on('mouseover', function (e) {
        // 	marker.setPosition(e.data.lnglat);
        // 	marker.setLabel({
        // 		content: e.data.hzxm + ' ' + e.data.xxdz
        // 	})
        // });
        // mass.on('mouseout', function (e) {
        // 	marker.setPosition(e.data.lnglat);
        // 	marker.setLabel({
        // 		content: ''
        // 	})
        // });
        // mass.on('click', function (e) {
        // 	$('#demo-default-modal-1').modal('show').off("shown.bs.modal").on(
        // 		'shown.bs.modal', e,
        // 		function () {
        // 			$("h4.titleText").html(e.data.hzxm + '@' + e.data.xxdz);
        // 			$('.tab-base a:first').tab('show')
        // 			var tableObj = $("#data-table-2"),
        // 				apiURL = API_HOST + "/appService/factory/getHisData.json",
        // 				paramData = {
        // 					'sbid': e.data.sb_id
        // 				},
        // 				fieldType = null,
        // 				callback = null,
        // 				extraOption = {
        // 					height: 460,
        // 					pageList: [10, 50, 100, 200, 500],
        // 					showExport: false
        // 				};
        // 			toRenderTableByAJAX(tableObj, apiURL, paramData, fieldType,
        // 				callback, extraOption);
        // 		});
        // })



        // for (var i = 0, marker2; i < this.equMapList.length; i++) {
        //   marker2 = new AMap.Marker({
        //     map: this.map,
        //     icon: new AMap.Icon({
        //       image: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
        //       size: new AMap.Size(52, 52),
        //       imageSize: new AMap.Size(15, 15)
        //     }),
        //     // position: [this.equMapList[i].latitude,this.equMapList[i].longitude]
        //     position: [this.equMapList[i].longitude, this.equMapList[i].latitude]
        //   });
        //   this.markers2.push(marker2);
        // }
        // var driving = new AMap.Driving({
        //   map: this.map,
        //   panel: "panel"
        // });

        //   // 启用工具条
        //   AMap.plugin(['AMap.ToolBar'], function () {
        //     map.addControl(new AMap.ToolBar({
        //       position: 'RB'
        //     }))
        //   })

      },

      initMapNew(){
        var map = new AMap.Map("container", {
          mapStyle: 'amap://styles/fresh',
          resizeEnable: true,
          center: this.centerPoint,
          zoom: 15
        });

        var style = [{
          url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 15),
          zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
        }];
        let keyData = sessionStorage.getItem('equiLoginValue');

        var getOperationMonitorInner = () => {//调入查询接口
          getEquipmentCoordinate().then(res => {
            let code = res.data.code;
            if (code == 0) {
              let data = res.data.data;
              let maplist=data.list
              var mass = new AMap.MassMarks(maplist, {
                opacity: 0.8,
                zIndex: 111,
                cursor: 'pointer',
                style: style
              });

              var marker = new AMap.Marker({content: ' ', map: map});

              mass.on('mouseover', function (e) {

                marker.setPosition(e.data.lnglat);
                marker.setLabel({content: e.data.name})
              });
              mass.on('click', (e) =>{

                let devParams = {
                  param: `{"key":${keyData},"reqData":{"dd_id":${e.data.ddId},"sb_id":${e.data.sbId}}}`
                }
                getDevData(devParams).then(res=> {
                  this.dialogVisible = true

                  let data = res.data.page[0]
                  let dataLab = res.data.resTitle
                  console.log(dataLab);
                  let ary=[]
                  dataLab.forEach(item=>{
                    if (item.defaultfld==1){
                      item.num=data[item.dataItem]
                      ary.push(item)
                    }
                  })
                  this.equDetail=ary;

                })
              })
              mass.setMap(map);

            } else if (code == 1) {
              this.$message({
                message: res.data.msg
              })
            }
          });
        }
        getOperationMonitorInner()

        var getMem = () => {//调入查询接口
          getOperationUserCoordinate().then(res => {
            let code = res.data.code;
            if (code == 0) {
              let data = res.data.data;
              let mapListMem=data.list
                var stylemem = [{
                  url: require('../assets/image/mem1.png'),
                  anchor: new AMap.Pixel(6, 6),
                  size: new AMap.Size(35, 35),
                  zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
                },
                  {
                    url: require('../assets/image/mem2.png'),
                    anchor: new AMap.Pixel(6, 6),
                    size: new AMap.Size(35, 35),
                    zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
                  }
                ];
              var mass = new AMap.MassMarks(mapListMem, {
                opacity: 0.8,
                zIndex: 111,
                cursor: 'pointer',
                style: stylemem
              });

              var marker = new AMap.Marker({content: ' ', map: map});
              mass.on('mouseover', function (e) {
                marker.setPosition(e.data.lnglat);
                marker.setLabel({content: `${e.data.userName}<br>工单数量:${e.data.workOrderCon}`})
              });
              mass.setMap(map);
            } else if (code == 1) {
              this.$message({
                message: res.data.msg
              })
            }
          });
        }
        getMem()
        setInterval(()=>{
          getMem()
        },30000)


        var drivingFn = (data) => {
          if(data){
            data.forEach(item=>{
              var driving = new AMap.Driving({
                map: map,
                hideMarkers: true,
                showTraffic: false
              });
              driving.search(new AMap.LngLat(item.operationUserLongitude, item.operationUserLatitude), new AMap.LngLat(item.equipmentLongitude, item.equipmentLatitude), function (status, result) {
              });
            })
          }
        }
        getWorkOrderRoute().then(res => {
          let code = res.data.code;
          if (code == 0) {
            let data = res.data.data.list;
            drivingFn(data)
            this.workRoute = data
            // return Promise.resolve(res.data.data)
          } else if (code == 1) {
            this.$message({
              message: res.data.msg
            })
          }
        });
      }
    },

  }
</script>

<style lang="less" scoped>
  .m-map {
    width: 100%;
    overflow: hidden;
    position: relative;
    &:after {
      content: '';
      display: block;
      margin-top: 100%;
    }
  }

  .button {
    background: rgba(255,255,255,0);
    display: flex;
    width: 80px;
    position: absolute;
    z-index: 999;
    left: 45%;
    p {
      width: 50px;
      color: green;
    }
  }

  .mainMap {
    /*width: 100%;*/
    /*height: 100%;*/
    background: white;
    padding-bottom: 5px;
    border: 1px solid rgb(211, 211, 211);

    .title {
      /*padding: 10px 10px;*/
      text-align: center;
      background: linear-gradient(90deg, rgba(1, 211, 150, 1) 0%, rgba(0, 201, 221, 1) 100%);
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 1px;
      height: 48px;
      line-height: 48px;
      width: 100%;
      font-size: 17px;
      color: white;
      .left{
        font-size: 16px;
        flex: 1;
        text-align: left;
        margin-left: 20px;
      }
      .middle{
        flex: 4;
      }
      .right{
        flex: 1;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: space-around;
        font-size: 16px;
        i{
          width: 20px;
          height: 20px;
          background: url('../assets/image/fullSc.png') no-repeat;
          background-size: 100%;
        }
      }
      /*background: white;*/
    }
    .full {
      width: 100%;
      height: 85%;
    }

    .con {
      height: 92%;
      width: 100%;
      display: flex;
      .left {
        padding: 0 20px;
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .text {
          /*padding: 2px 0;*/
          margin-bottom: 10px;
          text-align: center;
          /*flex: 1;*/
          height: 80px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          div {
            flex: 1;
            p {
              color: #556FB5;
              font-weight: 600;
            }
          }
        }
        .echart {
          width: 100%;
          height: 100%;
          padding: 2px 0;
          flex: 7;
        }
        .echart4 {
          /*height: 40%;*/
          width: 100%;
          height: 100%;
          padding: 2px 0;
          flex: 5;
        }
        .echart2 {
          /*padding: 2px 0;*/
          width: 100%;
          height: 80px;
          flex: 3;
          /*margin-bottom: 20px;*/
        }
      }
      .middle {
        /*flex: 1;*/
        width: 100%;
        /*height: 100%;*/
        /*.map {*/
        /*width: 100%;*/
        /*height: 80%;*/

        /*}*/

      }
      .swi {
        width: 100%;
        position: absolute;
        height: 80px;
        /*padding: 0 20px;*/
        /*background: red;*/
        bottom: 0;
        z-index: 1;
        .item {
          padding: 10px 0;
          height: 60px;
          background: rgba(255, 255, 255, 0.8);
          text-align: center;
        }
      }
      .gn_asidebtn {
        position: absolute;
        right: 0;
        z-index: 5;
        width: 40px;
        height: 40px;
      }
      .rightMenu {
        z-index: 3;
        position: absolute;
        right: 0;
        width: 351px;
        height: 174px;
        padding: 0 20px 20px;
        background: rgba(255, 255, 255, 0.7);

        .echart3 {
          /*padding: 2px 0;*/
          /*width: 200px;*/
          /*height: 200px;*/
          /*margin-bottom: 20px;*/
        }
      }

    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s
  }

  .fade-enter, .fade-leave-active {
    opacity: 0
  }

  .gn_leftbox {
    width: 100%;
    height: 100%;
  }

  .gn_asidebtn {
    display: block;
    margin: 0 auto;
    padding: 10px 0;
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    color: #01d39a;
    background: rgba(255, 255, 255, 0.7);
  }
  #swi .swiper-wrapper{
    transition-timing-function: linear;
  }

</style>
